<template>
    <div class="wxappletManage">
        <el-form :inline="true">
            <el-form-item label="公司名称：">
                <el-input type="text" v-model="companyName" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="queryPageCompany">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="wxappletList" border tooltip-effect="dark" style="width: 100%; ">
            <el-table-column prop="companyName" align="center" label="公司名称" show-overflow-tooltip min-width="200"></el-table-column>
            <el-table-column prop="name" align="center" label="管理人" show-overflow-tooltip width="85"></el-table-column>
            <el-table-column prop="phone" align="center" label="联系方式" width="110"></el-table-column>
            <el-table-column prop="appName" align="center" label="小程序名称" width="140"></el-table-column>
            <el-table-column label="小程序类别" align="center" width="95">
                <template slot-scope="scope">
                    <div>{{ scope.row.accountType === 1 ? "用户端" : "crm端" }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="appId" label="appId" width="170"></el-table-column>
            <el-table-column label="最新状态" align="center" width="110">
                <template slot-scope="scope">
                    <div
                        v-if="scope.row.state == '-1' || scope.row.state == '3' || scope.row.state == '4' || scope.row.state == '7'">
                        <el-tooltip class="item" effect="dark" placement="left">
                            <div slot="content">失败原因：<br>{{ scope.row.remark ? scope.row.remark : '暂无' }}</div>
                            <div>{{ scope.row.state | getState }}</div>
                        </el-tooltip>
                    </div>
                    <div v-else>{{ scope.row.state | getState }}</div>
                </template>
            </el-table-column>
            <el-table-column label="当前版本" align="center" width="110">
                <template slot-scope="scope">
                    <div>{{ scope.row.versionNum }}</div>
                </template>
            </el-table-column>
            <el-table-column label="选择版本" align="center" width="90">
                <template slot-scope="scope">
                    <el-button class="checkCard" @click="getVersion(scope.row)" type="text" style="color: #51cdcb;"
                        size="medium">获取版本</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
                <template slot-scope="scope">
                    <el-button class="checkCard" @click="getWxCode(scope.row)" type="text" style="color: #51cdcb;"
                        size="medium">获取体验码</el-button>
                    <el-button class="checkCard" v-if="scope.row.state == '2'" @click="getLatestAuditStatus(scope.row)"
                        type="text" style="color: #51cdcb;" size="medium">获取审核结果</el-button>
                    <el-button class="checkCard" v-if="scope.row.state == '1'" @click="submitAudit(scope.row)" type="text"
                        style="color: #51cdcb;" size="medium">提交审核</el-button>
                    <el-button class="checkCard" v-if="scope.row.state == '5'" @click="release(scope.row)" type="text"
                        style="color: #51cdcb;" size="medium">发布</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog class="version-manage-dialog" title="版本选择" :visible.sync="dialogVisible">
            <el-table :data="dialogDetail.tableData" border highlight-current-row @current-change="handleCurrentChange"
                style="width: 100%">
                <el-table-column property="versionNum" align="center" label="版本" width="120">
                </el-table-column>
                <el-table-column property="desc" align="center" label="描述">
                </el-table-column>
                <el-table-column label="操作" align="center" width="100">
                    <template slot-scope="scope">
                        <el-button class="checkCard" @click="updateVersion(scope.row)" type="text" style="color: #51cdcb;"
                            size="medium">版本更新</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <el-pagination @current-change="dialogPageNumChange" :current-page.sync="dialogDetail.pageNum"
                    :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                    :total="dialogDetail.total">
                </el-pagination>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <div class="page">
            <el-pagination @current-change="handlePageNumChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="扫码体验" :visible.sync="imgDialogVisible" class="wxCode-dialog">
            <div style="width: 100%; height: 100%; display:flex;justify-content: center;align-items: center;">
                <img :src="wxCodeUrl" alt="" style="width: 300px; height: 300px;">
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { selectCompanyAccountListApi, appletCodeManageListApi, commitApi, getQrCodeApi, getLatestAuditStatusApi, submitAuditApi, releaseApi } from '@/api/api.js'
import { serverUrl } from "@/utils/server.js";
export default {
    data() {
        return {
            imgDialogVisible: false,
            wxCodeUrl: '',
            dialogDetail: {
                tableData: [],
                total: 0,
                pageNum: 1
            },
            total: 0,
            pageNum: 1,
            wxappletList: [],
            dialogVisible: false,
            currentRow: {},
            getVersionItem: {},
            companyName: ''
        }
    },
    created() {
        this.getwxappletList();
    },
    methods: {
        queryPageCompany() {
            this.getwxappletList()
        },
        release(item) {
            let params = {
                versionId: item.versionId,
                appId: item.appId
            }
            this.$load.showLoad();
            releaseApi(params).then(res => {
                this.$message({
                    message: '发布成功，刷新页面',
                    type: 'success'
                });
                setTimeout(() => {
                    this.getwxappletList();
                    this.$load.hideLoad();
                }, 1000)
            }).catch(err => {
                this.$load.hideLoad();
            })
        },
        submitAudit(item) {
            let params = {
                versionId: item.versionId,
                appId: item.appId
            }
            this.$load.showLoad();
            submitAuditApi(params).then(res => {
                this.$message({
                    message: '提交审核成功，刷新页面',
                    type: 'success'
                });
                setTimeout(() => {
                    this.getwxappletList();
                    this.$load.hideLoad();
                }, 1000)
            }).catch(err => {
                this.$load.hideLoad();
            })
        },
        getLatestAuditStatus(item) {
            let params = {
                versionId: item.versionId,
                appId: item.appId
            }
            this.$confirm('审核通过立即发布?', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
            }).then(res => {
                params.release = true;
                this.$load.showLoad();
                getLatestAuditStatusApi(params).then(res => {
                    setTimeout(() => {
                        this.getwxappletList();
                        this.$load.hideLoad();
                    }, 1000)
                }).catch(err => {
                    this.$load.hideLoad();
                });
            }).catch(action => {
                if (action === 'cancel') {
                    params.release = false;
                    this.$load.showLoad();
                    getLatestAuditStatusApi(params).then(res => {
                        setTimeout(() => {
                            this.getwxappletList();
                            this.$load.hideLoad();
                        }, 1000)
                    }).catch(err => {
                        this.$load.hideLoad();
                    });
                } else {
                    return;
                }
            });
        },
        getwxappletList(companyName) {
            let params = {
                pageNum: this.pageNum,
                companyName: this.companyName
            }
            selectCompanyAccountListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.wxappletList = res.data.pageInfo.list;
                } else {
                    this.wxappletList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.wxappletList = [];
            })
        },
        getVersion(item) {
            let params = {
                companyName: item.companyName,
                versionType: item.accountType,
                pageNum: this.dialogDetail.pageNum
            }
            appletCodeManageListApi(params).then(res => {
                if (res.code == 200) {
                    this.dialogDetail.tableData = res.data.pageInfo.list;
                    this.dialogDetail.total = res.data.pageInfo.total;
                    this.getVersionItem = item;
                    this.dialogVisible = true;
                } else {
                    this.dialogDetail.tableData = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            })
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        cancel() {
            this.dialogVisible = false;
            this.dialogDetail = {
                tableData: [],
                total: 0,
                pageNum: 1
            };
        },
        confirm() {
            this.cancel();
        },
        dialogPageNumChange() {
            this.getVersion(this.getVersionItem);
        },
        handlePageNumChange() {
            this.getwxappletList();
        },
        updateVersion(item) {
            let params = {
                appId: this.getVersionItem.appId,
                versionId: item.versionId
            };
            this.$confirm('是否立即更新版本?', '提示', {
                distinguishCancelAndClose: true,
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
            }).then(res => {
                params.submitAudit = true;
                this.commit(params);
            }).catch(action => {
                if (action === 'cancel') {
                    params.submitAudit = false;
                    this.commit(params);
                } else {
                    return;
                }
            });
        },
        commit(params) {
            this.$load.showLoad();
            commitApi(params).then(res => {
                this.$message({
                    message: "提交版本更新成功，刷新数据",
                    type: 'success'
                });
                this.dialogVisible = false;
                setTimeout(() => {
                    this.getwxappletList();
                    this.$load.hideLoad();
                }, 1000)
            }).catch(err => {
                this.$load.hideLoad();
            })
        },
        getWxCode(item) {
            let params = {
                appId: item.appId
            }
            getQrCodeApi(params).then(res => {
                this.wxCodeUrl = serverUrl.imgUrl + res;
                this.imgDialogVisible = true;
            })
        }
    }
}
</script>
<style lang="scss">
.wxappletManage {
    .page {
        background: #fff;
        padding: 10px 0;
        text-align: center;
    }

    .version-manage-dialog {
        .el-dialog {
            width: 600px;

            .el-dialog__header {
                text-align: center;
            }
        }
    }

    .wxCode-dialog {
        .el-dialog {
            width: 350px;

            .el-dialog__header {
                text-align: center;
            }
        }
    }
}
</style>
